<!DOCTYPE html PUBLIC '-//W3C//DTD Xhtml 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<!-- So we have to use html instead of xul... As a bit of an html noob, lets keep this simple:
     use absolute positioning and the power of z-index to implement tabs  -->
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Options</title>
        <script type='text/javascript' src='../jscolor/jscolor.js'></script>
		<link href='options.css' type='text/css' rel='stylesheet' />
	</head>
	<body id='canw-body'>
        <div id='canw-header'>
            <h2>Options</h2>
        </div>
        <div id='canw-tabWrapper'>
            <div id='canw-tab1' class='tab' data-l10n-id='opt-location'></div>
            <div id='canw-tab2' class='tab' data-l10n-id='opt-display'></div>
            <div id='canw-tab3' class='tab' data-l10n-id='opt-style'></div>
            <div id='canw-tab4' class='tab' data-l10n-id='opt-icons'></div>
            <div id='canw-tab5' class='tab' data-l10n-id='opt-radar'></div>
            <div id='canw-tab6' class='tab' data-l10n-id='opt-other'></div>
        </div>
        <div id='canw-content1' class='contentWrapper'>
            <label id='canw-provincesLabel' data-l10n-id='opt-selectRegion'></label>
            <select id='canw-provinces' size='13'>
                <option value='AB' data-l10n-id='opt-ab'></option>
                <option value='BC' data-l10n-id='opt-bc'></option>
                <option value='MB' data-l10n-id='opt-mb'></option>
                <option value='NB' data-l10n-id='opt-nb'></option>
                <option value='NL' data-l10n-id='opt-nl'></option>
                <option value='NT' data-l10n-id='opt-nt'></option>
                <option value='NS' data-l10n-id='opt-ns'></option>
                <option value='NU' data-l10n-id='opt-nu'></option>
                <option value='ON' data-l10n-id='opt-on'></option>
                <option value='PE' data-l10n-id='opt-pe'></option>
                <option value='QC' data-l10n-id='opt-qc'></option>
                <option value='SK' data-l10n-id='opt-sk'></option>
                <option value='YT' data-l10n-id='opt-yt'></option>
            </select>
            <label id='canw-sitesLabel' data-l10n-id='opt-selectLocation'></label>
            <select id='canw-sites' size='13'></select>
        </div>
        <div id='canw-content2' class='contentWrapper'>
            <fieldset id='canw-toolbar'>
                <legend data-l10n-id='opt-toolbar'></legend>
                <p data-l10n-id='opt-current'></p>
                <input id='canw-temperature' type='checkbox' value='temperature' />
                <label for='canw-temperature' class='checkboxLabel' data-l10n-id='opt-temperature'></label><br />
                <input id='canw-wind' type='checkbox' value='wind' />
                <label for='canw-wind' class='checkboxLabel' data-l10n-id='opt-wind'></label><br />
                <input id='canw-windChill' type='checkbox' value='windChill' />
                <label for='canw-windChill' class='checkboxLabel' data-l10n-id='opt-windChill'></label><br />
                <input id='canw-humidity' type='checkbox' value='humidity' />
                <label for='canw-humidity' class='checkboxLabel' data-l10n-id='opt-humidity'></label><br />
                <input id='canw-humidex' type='checkbox' value='humidex' />
                <label for='canw-humidex' class='checkboxLabel' data-l10n-id='opt-humidex'></label><br />
                <input id='canw-condition' type='checkbox' value='condition' />
                <label for='canw-condition' class='checkboxLabel' data-l10n-id='opt-condition'></label><br />
                <input id='canw-conditionIcon' type='checkbox' value='conditionIcon' />
                <label for='canw-conditionIcon' class='checkboxLabel' data-l10n-id='opt-conditionIcon'></label><br />
            </fieldset>
            <div id='canw-forecastPeriods'>
                <p data-l10n-id='opt-forecastPeriods'></p>
                <input id='canw-today' type='checkbox' value='today' />
                <label for='canw-today' class='checkboxLabel' data-l10n-id='opt-today'></label><br />
                <input id='canw-tonight' type='checkbox' value='tonight' />
                <label for='canw-tonight' class='checkboxLabel' data-l10n-id='opt-tonight'></label><br />
                <input id='canw-todayplus1' type='checkbox' value='todayplus1' />
                <label for='canw-todayplus1' class='checkboxLabel' data-l10n-id='opt-today+1'></label><br />
                <input id='canw-todayplus2' type='checkbox' value='todayplus2' />
                <label for='canw-todayplus2' class='checkboxLabel' data-l10n-id='opt-today+2'></label>
            </div>
            <div id='canw-forecastDetails'>
                <p data-l10n-id='opt-forecastDetails'></p>
                <input id='canw-dayLabel' type='checkbox' value='dayLabel' />
                <label for='canw-dayLabel' class='checkboxLabel' data-l10n-id='opt-dayLabel'></label><br />
                <input id='canw-forecastTemp' type='checkbox' value='forecastTemp' />
                <label for='canw-forecastTemp' class='checkboxLabel' data-l10n-id='opt-tempHighLow'></label><br />
                <input id='canw-pop' type='checkbox' value='pop' />
                <label for='canw-pop' class='checkboxLabel' data-l10n-id='opt-pop'></label><br />
                <input id='canw-forecastIcon' type='checkbox' value='forecastIcon' />
                <label for='canw-forecastIcon' class='checkboxLabel' data-l10n-id='opt-forecastIcon'></label><br />
            </div>
            <input id='canw-showAllInPanel' type='checkbox' value='showAllInPanel' />
            <label for='canw-showAllInPanel' class='checkboxLabel' data-l10n-id='opt-showAllPanel'></label><br />
            <input id='canw-warnings' type='checkbox' value='warnings' />
            <label for='canw-warnings' class='checkboxLabel' data-l10n-id='opt-showWarnings'></label><br />
            <input id='canw-warningsOnce' class='indent' type='checkbox' value='warningsOnce' />
            <label for='canw-warningsOnce' class='checkboxLabel' data-l10n-id='opt-warningsOnce'></label>
        </div>
        <div id='canw-content3' class='contentWrapper'>
            <fieldset id='canw-font'>
                <legend data-l10n-id='opt-toolbarFont'></legend>
                <label id='canw-fontsizeLabel' class='fontLabel' data-l10n-id='opt-fontSize'></label>
                <select id='canw-sizes' class='font' size='3'>
                    <option value='12'>12px.</option>
                    <option value='14'>14px.</option>
                    <option value='16'>16px.</option>
                </select>
                <input id='canw-bold' type='checkbox' class='font indent' value='bold' />
                <label for='canw-bold' class='fontLabel' data-l10n-id='opt-fontWeight'></label>
                <input id='canw-italic' type='checkbox' class='font indent' value='italic' />
                <label for='canw-italic' class='fontLabel' data-l10n-id='opt-fontType'></label>
            </fieldset>
            <fieldset id='canw-color'>
                <legend data-l10n-id='opt-toolbarColour'></legend>
                <table border='0'>
                    <tr>
                        <td>
                            <input id='canw-normal' type='checkbox' value='normal' />
                            <label for='canw-normal' class='checkboxLabel' data-l10n-id='opt-noWatchWarning'></label>
                        </td>
                        <td class='tdPadding'>
                            <label for='canw-textColorNormal' class='textboxLabel' data-l10n-id='opt-text'></label>
                            <input id='canw-textColorNormal' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                        <td>
                            <label for='canw-backgroundColorNormal' class='textboxLabel' data-l10n-id='opt-background'></label>
                            <input id='canw-backgroundColorNormal' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id='canw-priorityLow' type='checkbox' value='priorityLow' />
                            <label for='canw-priorityLow' class='checkboxLabel' data-l10n-id='opt-priorityLow'></label>
                        </td>
                        <td class='tdPadding'>
                            <label for='canw-textColorLow' class='textboxLabel' data-l10n-id='opt-text'></label>
                            <input id='canw-textColorLow' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                        <td>
                            <label for='canw-backgroundColorLow' class='textboxLabel' data-l10n-id='opt-background'></label>
                            <input id='canw-backgroundColorLow' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id='canw-priorityMedium' type='checkbox' value='priorityMedium' />
                            <label for='canw-priorityMedium' class='checkboxLabel' data-l10n-id='opt-priorityMed'></label>
                        </td>
                        <td class='tdPadding'>
                            <label for='canw-textColorMedium' class='textboxLabel' data-l10n-id='opt-text'></label>
                            <input id='canw-textColorMedium' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                        <td>
                            <label for='canw-backgroundColorMedium' class='textboxLabel' data-l10n-id='opt-background'></label>
                            <input id='canw-backgroundColorMedium' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id='canw-priorityHigh' type='checkbox' value='priorityHigh' />
                            <label for='canw-priorityHigh' class='checkboxLabel' data-l10n-id='opt-priorityHigh'></label>
                        </td>
                        <td class='tdPadding'>
                            <label for='canw-textColorHigh' class='textboxLabel' data-l10n-id='opt-text'></label>
                            <input id='canw-textColorHigh' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                        <td>
                            <label for='canw-backgroundColorHigh' class='textboxLabel' data-l10n-id='opt-background'></label>
                            <input id='canw-backgroundColorHigh' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id='canw-priorityUrgent' type='checkbox' value='priorityUrgent' />
                            <label for='canw-priorityUrgent' class='checkboxLabel' data-l10n-id='opt-priorityUrgent'></label>
                        </td>
                        <td class='tdPadding'>
                            <label for='canw-textColorUrgent' class='textboxLabel' data-l10n-id='opt-text'></label>
                            <input id='canw-textColorUrgent' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                        <td>
                            <label for='canw-backgroundColorUrgent' class='textboxLabel' data-l10n-id='opt-background'></label>
                            <input id='canw-backgroundColorUrgent' type='text'
                                   class='color {hash:true,required:false}'
                                   size='7' disabled='true' />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div id='canw-content4' class='contentWrapper'>
            <p data-l10n-id='opt-icon1'></p>            
            <p data-l10n-id='opt-icon2'></p>        
            <p><span data-l10n-id='opt-icon3'></span><a href='https://sites.google.com/site/canadianweatherhelp/condition-icons' target="_blank" > Canadian Weather</a></p><br />
            <p><span data-l10n-id='opt-icon4'></span><a href='http://www.psdgraphics.com/' target="_blank" > www.psdgraphics.com</a>
            <p><span data-l10n-id='opt-icon5'></span><a href='http://www.zeusboxstudio.com/' target="_blank" > www.zeusboxstudio.com</a></p>
            <table id='canw-conditionTable'>
                <tr>
                    <td><div id='canw-sunImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-moonImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-cloudImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-rainImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-drizzleImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-snowImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-thunderstormImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-hazeImg' class='canw-conditionImg'></div></td>
                </tr>
                 <tr>
                    <td><div id='canw-hailImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-windImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-crystalImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-freezingImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-fogImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-smokeImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-funnelImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-tornadoImg' class='canw-conditionImg'></div></td>
                </tr>
                <tr>
                    <td><div id='canw-dustImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-increasingImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-decreasingImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-recentImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-precipImg' class='canw-conditionImg'></div></td>
                    <td><div id='canw-flagImg' class='canw-conditionImg'></div></td>
                </tr>
            </table>
        </div>
        <div id='canw-content5' class='contentWrapper'>
            <label id='canw-radarProvincesLabel' data-l10n-id='opt-selectProvince'></label>
            <select id='canw-radarProvinces' size='9' disabled='true'>
                <option value='AB' data-l10n-id='opt-ab'></option>
                <option value='BC' data-l10n-id='opt-bc'></option>
                <option value='MB' data-l10n-id='opt-mb'></option>
                <option value='NB' data-l10n-id='opt-nb'></option>
                <option value='NL' data-l10n-id='opt-nl'></option>
                <option value='NS' data-l10n-id='opt-ns'></option>
                <option value='ON' data-l10n-id='opt-on'></option>
                <option value='QC' data-l10n-id='opt-qc'></option>
                <option value='SK' data-l10n-id='opt-sk'></option>
            </select>
            <label id='canw-radarStationsLabel' data-l10n-id='opt-selectStation'></label>
            <select id='canw-radarStations' size='9' disabled='true'></select><br />
            <div id='canw-radarOptions'>
                <input id='canw-radarEnable' type='checkbox' value='radarEnable' />
                <label for='canw-radarEnable' class='checkboxLabel' data-l10n-id='opt-enableRadar'></label>
            </div>
        </div>
        <div id='canw-content6' class='contentWrapper'>
            <fieldset>
                <legend data-l10n-id='opt-language'></legend>
                <input id='canw-english' type='radio' name='language' value='english' checked='true' />
                <label for='canw-english' class='radioLabel' data-l10n-id='opt-english'></label>
                <input id='canw-french' type='radio' name='language' value='french' />
                <label for='canw-french' class='radioLabel' data-l10n-id='opt-french'></label>
            </fieldset>
            <fieldset>
                <legend data-l10n-id='opt-updates'></legend>
                <label for='canw-minutes' class='textboxLabel' data-l10n-id='opt-minutes'></label>
                <input id='canw-minutes' type='text' maxlength='3' size='3' />
            </fieldset><br />
            <button id='canw-buttonRebuildToolbar' type='button' data-l10n-id='buttonRebuild'></button>
        </div>
        <div class='buttonPack'>
            <button id='canw-buttonOk' type='button' data-l10n-id='buttonOK'></button>
            <button id='canw-buttonCancel' type='button' data-l10n-id='buttonCancel'></button>
        </div>
	</body>
</html>
